// 下拉树组件 用于分类字典表单的下拉树 
//  1.a-tree-select 配置树的各项配置项
//  2.初始化加载下拉树的根节点
//  3. 加载展开子节点 手动拼装从服务器加载的数据
<template>
    <a-tree-select
        allowClear
        labelInValue
        :getPopupContainer="(node) => node.parentNode"
        style="width: 100%"
        :disabled="disabled"
        :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
        :placeholder="placeholder"
        :loadData="asyncLoadTreeData"
        :value="treeValue"
        :treeData="treeData"
        :multiple="multiple"
        @change="onChange"
        @search="onSearch"
    ></a-tree-select>
</template>
<script>
import {queryDictTreeData} from '@/mock'
export default {
    name: 'JTreeSelect',
    props: {
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
        placeholder: {
            type: String,
            default: '请选择',
            required: false
        },
        // 是否支持多选
        multiple: {
            type: Boolean,
            default: false
        },
        dict: {
            type: String,
            default: '',
            required: false
        },
        pidField: {
            type: String,
            default: '',
            required: false
        },
        pidValue: {
            type: String,
            default: '',
            required: false
        }
    },
    data() {
        return {
            // tree数据数组
            treeData: [],
            treeValue: null,
            // 字典绑定的属性
            tableName: '',
            text: "",
            code: ""
        }
    },
    watch: {
        dict() {
            this.initDIctInfo();
            this.loadRoot();
        }
    },
    created() {
        this.initDictInfo()
        this.loadRoot();
    },
    methods: {
        onChange(value) {
            if(!value) {
                this.$emit('change','');
                this.treeValue = null;
            }else if(value instanceof Array) {
                this.$emit('change',value.map(item=>item.value).join(','));
                this.treeValue = value;
            }else {
                this.$emit('change',value.value,value.label);
                this.treeValue = value
            }
        },
        onSearch() {},
        // 渲染根节点数据
        loadRoot() {
              queryDictTreeData().then(res=>{
                // 组装请求的数据成树
                if(res.success) {
                    // 遍历数据组装
                    for(let i of res.result) {
                        i.value = i.key;
                        if(i.leaf == false) {
                            i.isLeaf = false;
                        }else if(i.leaf == true) {
                            i.isLeaf = true;
                        }
                    }
                    this.treeData = [...res.result];
                }
            })
        },
        // 渲染下级节点
        asyncLoadTreeData() {
            // queryDictTreeChild().then(res=>{
            //     // 组装请求的数据成树
            //     if(res.success) {
            //         // 遍历数据组装
            //         for(let i of res.result) {
            //             i.value = i.key;
            //             if(i.leaf == false) {
            //                 i.isLeaf = false;
            //             }else if(i.leaf == true) {
            //                 i.isLeaf = true;
            //             }
            //         }
            //         this.addChildren(res.result,this.treeData);
            //         // 组装子节点
            //         this.treeData = [...this.treeData];
            //     }
            // })
        },
        // 加载子节点
        addChildren(children,treeArray) {
            if(treeArray && treeArray.length > 0) {
                for(let item of treeArray) {
                    if(!children || children.length == 0) {
                        item.isLeaf = true;
                    }else {
                        item.children = children;
                    }
                    break;
                }
            }
        },
        initDictInfo() {
            let arr = this.dict.split(',');
            this.tableName = arr[0];
            this.text = arr[1];
            this.code = arr[2];
        }
    }
}
</script>